import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import '../components/CategoryTitle.dart';
import '../components/PageWrap.dart';

class TextFieldAndFormLn extends StatefulWidget {
  const TextFieldAndFormLn({super.key});

  @override
  State<TextFieldAndFormLn> createState() => _TextFieldAndFormLnState();
}

class _TextFieldAndFormLnState extends State<TextFieldAndFormLn> {
  //定义一个controller
  TextEditingController _unameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  FocusNode focusNode1 = FocusNode();
  FocusNode focusNode2 = FocusNode();

  GlobalKey _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    //监听输入改变
    _unameController.addListener(() {
      print(_unameController.text);
    });
  }

  @override
  Widget build(BuildContext context) {
    return PageWrap(
      title: "输入框及表单",
      children: <Widget>[
        Column(
          children: <Widget>[
            CategoryTitle(text: "输入框"),
            TextField(
                // autofocus: true,
                focusNode: focusNode1,
                //关联focusNode1
                controller: _unameController,
                //设置controller
                decoration: InputDecoration(
                    labelText: "用户名",
                    hintText: "用户名或邮箱",
                    prefixIcon: Icon(Icons.person)),
                onChanged: (v) {
                  print("onChange: $v");
                }),
            TextField(
              focusNode: focusNode2, //关联focusNode2
              controller: _passwordController, //设置controller
              decoration: InputDecoration(
                  labelText: "密码",
                  hintText: "您的登录密码",
                  prefixIcon: Icon(Icons.lock)),
              obscureText: true,
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    child: Text("提交"),
                    onPressed: () {
                      print("用户名：${_unameController.text}");
                      print("密码：${_passwordController.text}");
                    },
                  ),
                  ElevatedButton(
                    child: Text("隐藏键盘"),
                    onPressed: () {
                      // 当所有编辑框都失去焦点时键盘就会收起
                      focusNode1.unfocus();
                      focusNode2.unfocus();
                    },
                  ),
                ],
              ),
            ),
            CategoryTitle(text: "表单Form"),
            Form(
              key: _formKey, //设置globalKey，用于后面获取FormState
              autovalidateMode: AutovalidateMode.onUserInteraction,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    // autofocus: true,
                    controller: _unameController,
                    decoration: InputDecoration(
                      labelText: "用户名",
                      hintText: "用户名或邮箱",
                      icon: Icon(Icons.person),
                    ),
                    // 校验用户名
                    validator: (v) {
                      return v!.trim().isNotEmpty ? null : "用户名不能为空";
                    },
                  ),
                  TextFormField(
                    controller: _passwordController,
                    decoration: InputDecoration(
                      labelText: "密码",
                      hintText: "您的登录密码",
                      icon: Icon(Icons.lock),
                    ),
                    obscureText: true,
                    //校验密码
                    validator: (v) {
                      return v!.trim().length > 5 ? null : "密码不能少于6位";
                    },
                  ),
                  // 登录按钮
                  Padding(
                    padding: const EdgeInsets.only(top: 28.0),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: ElevatedButton(
                            child: Padding(
                              padding: const EdgeInsets.all(16.0),
                              child: Text("登录"),
                            ),
                            onPressed: () {
                              // 通过_formKey.currentState 获取FormState后，
                              // 调用validate()方法校验用户名密码是否合法，校验
                              // 通过后再提交数据。
                              if ((_formKey.currentState as FormState)
                                  .validate()) {
                                //验证通过提交数据
                              }
                            },
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        )
      ],
    );
  }
}
